<template>
<div class="page-wrapper">
  <Breadcrumb v-bind="breads" />
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <form class="form-inline" role="form" @submit.prevent="searchRoles(1)">
              <div class="form-group">
                <select v-model="search.platform" class="select2 form-control custom-select" :disabled="search.platform">
                  <option value="">-平台类型-</option>
                  <option v-for="(plat, index) in platforms" :key="index" :value="plat.name">{{plat.text}}</option>
                </select>
              </div>
              <div class="form-group">
                <label class="control-label">角色名称：</label>
                <div class="btn-group">
                  <input type="text" v-model="search.name" class="form-control" style="width:150px;">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">角色编码：</label>
                <div class="btn-group">
                  <input type="text" v-model="search.code" class="form-control" style="width:150px;">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">&nbsp;</label>
                <button type="submit" id="search-bt" class="btn btn-primary">查 找</button>
              </div>
              <div class="form-group">
                <label class="control-label">&nbsp;</label>
                <div class="btn-group">
                  <button type="button" class="btn btn-primary" v-on:click="newRole()">新 增</button>
                </div>
              </div>
            </form>
          </div>
          <div class="col-12 table-responsive">
            <table class="table table-hover">
              <col width="25%">
              <col width="25%">
              <col width="25%">
              <col width="25%">
              <thead>
                <tr>
                  <th>角色名称</th>
                  <th>角色编码</th>
                  <th>平台类型</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <ListItem v-for="(role, index) in roles" v-bind="role" :index="index" :key="index" v-on:edit="editRole($event)"
                  v-on:del="delRole($event)" />
              </tbody>
            </table>
            <div class="col-12">
              <PageLink v-bind="paging" v-on:go-page="searchRoles($event)" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Footer />
  <RoleModal ref="roleModal" :platType="platType" v-on:role="setRole($event)" />
</div>
</template>
<script>
  import $ from 'jquery'
  import cfg from '../dist/js/config'

  import Footer from './ComFooter'
  import Breadcrumb from './ComBreadcrumb'
  import PageLink from './ComPageLink'
  import ListItem from './RoleListItem'
  import RoleModal from './RoleEditModal'

  import { platforms } from '../dist/js/enum'

  const platform = -1

  // 查询条件
  const search = {}

  // 列表数据
  const roles = []

  // 分页信息
  const paging = {}

  // 添加/编辑对象
  const role = {}

  function searchRoles(nowPage) {
    if (nowPage) {
      this.search.nowPage = nowPage
    }
    $.get(cfg.serverPath + '/role/page/' + this.platform + '/!/' + this.platType + '-list-role',
      this.search,
      result => {
        if (result.status != 0) {
          $(document).failMsg(result.message)
          return
        }
        Object.assign(this.paging, paging, result.data.paging)
        this.roles.splice(0, this.roles.length)
        if (!result.data.list) {
          return
        }
        for (let role of result.data.list) {
          this.roles.push(role) }
      })
  }
  function newRole() {
    this.$refs.roleModal.setRole({
      platform: this.platform
    })
    this.$refs.roleModal.open()
  }
  function editRole(index) {
    this.role = this.roles[index]
    this.$refs.roleModal.setRole(this.role)
    this.$refs.roleModal.open()
  }
  function delRole(index) {
    this.role = this.roles[index]
    $.ajax({
      contentType: 'application/json; charset=UTF-8',
      url: cfg.serverPath + '/role/del/' + this.role.platform + '/!/' + this.platType + '-del-role',
      type: 'delete',
      data: '' + this.role.roleId,
      success: result => {
        if (result.status != 0) {
          $(document).failMsg(result.message)
          return
        }
        $(document).infoMsg('删除成功')
        this.roles.splice(index, 1)
      }
    })
  }
  function setRole(role) {
    if (this.role && this.role.roleId == role.roleId) {
      Object.assign(this.role, this.role, role)
    } else {
      this.roles.unshift(role)
    }
  }
  function reset() {
    for (let i in platforms) {
      if (platforms[i].name.toLowerCase().indexOf(this.platType) != -1) {
        this.platform = i
        break
      }
    }
    this.search = {
      name: '',
      code: '',
      platform: platforms[this.platform].name,
      nowPage: 1,
      'sorts[0].field': 'roleId',
      'sorts[0].isDesc': true,
    }
    this.roles = []
    this.paging = {}
    this.role = {}
    this.searchRoles()
  }
  function breads() {
    return {
      title: '角色管理',
      items: [
        {
          href: '#/',
          name: '主页'
        },
        {
          href: '',
          name: this.platform > -1 ? platforms[this.platform].text : ''
        },
        {
          href: '',
          name: '角色管理'
        } ]
    }
  }

  export default {
    props: {
      platType: String
    },
    components: {
      Footer,
      Breadcrumb,
      ListItem,
      PageLink,
      RoleModal
    },
    data() {
      return {
        platforms,
        platform,
        search,
        role,
        roles,
        paging
      }
    },
    computed: {
      breads
    },
    created() {
      this.reset()
    },
    methods: {
      reset,
      searchRoles,
      setRole,
      newRole,
      editRole,
      delRole
    },
    watch: {
      platType() {
        this.reset()
      }
    }
  }
</script>